<template>
	<div class="channelCon">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 客户端分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="选择日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.date"
						align="left"
						type="daterange"
						placeholder="请选择日期"
						@change='dateChange' 
						:picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="进入步骤类别：" :label-width="formLabelWidth"  prop="goToStep">
						<el-select v-model="ruleForm.goToStep" filterable  placeholder="请选择进入步骤类别" @change="goToStepChange">
							<el-option v-for="(val,key) in goToSteps" :label="val.goToStepName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search(ruleForm)" :disabled="searchable">查询</el-button>
		    		</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="right_content">
			<div class="channelConTable"  style='margin-bottom:40px;'>
				<div class="channelConTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						渠道步骤转化率
					</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel(1,'渠道步骤转化率')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="channelConTableBody fadeIn animated">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="tableData1"
					    border
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change="sortChange"
					    >
					     <el-table-column sortable align="center"
					        v-for="(col,key) in tableHead1"
					        :prop="col.prop" :label="col.label" :key='col.label' width="180">
					    </el-table-column>
					  </el-table>
					</template>
					<div class="pages channelConPage">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="currentPage1"
							:page-sizes="pageSizes1"
							:page-size="pageSize1"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal1">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="channelConTable"  style='margin-bottom:40px;'>
				<div class="channelConTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						渠道步骤流失率
					</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel(2,'渠道步骤流失率')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="channelPass tb" id="channelPass"></div>
				<div class="channelConTableBody fadeIn animated">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="tableData2"
					    border
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change="sortChange2"
					    >
					    <el-table-column sortable align="center"
					        v-for="(col,key) in tableHead2"
					        :prop="col.prop" :label="col.label" :key='key' width="180">
					    </el-table-column>
					  </el-table>
					</template>
					<div class="pages channelConPage">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="currentPage2"
							:page-sizes="pageSizes2"
							:page-size="pageSize2"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal2">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./channelCon.styl"></style>
<script src="./channelCon.js"></script>
